<template>
  <a-form
    :model="roleForm"
    @finish="submit"
    :label-col="{ span: 6 }"
    label-align="left"
    class="h-[100%]"
    :disabled="hasPerm('system:role:edit')"
  >
    <FormCard title="身份管理" :back="back">
      <template #extra>
        <a-button type="primary" :loading="loading" htmlType="submit">保存</a-button>
      </template>
      <a-row class="h-[100%]" :gutter="12">
        <a-col :span="12" class="ax_sticky_top">
          <a-card>
            <a-form-item label="身份名称" name="roleName" required>
              <a-input v-model:value="roleForm.roleName"></a-input>
            </a-form-item>

            <a-form-item label="排序" name="roleSort" required>
              <a-input-number class="w-100" v-model:value="roleForm.roleSort"></a-input-number>
              <div class="text-12 system__subtitle">
                <InfoCircleFilled />
                数字越小，排序靠前
              </div>
            </a-form-item>

            <a-form-item label="身份标识" name="roleKey" required>
              <a-input class="w-100" v-model:value="roleForm.roleKey"></a-input>
            </a-form-item>

            <a-form-item label="身份描叙" name="remark">
              <a-textarea
                :autoSize="{ minRows: 2, maxRows: 4 }"
                v-model:value="roleForm.remark"
                placeholder="用于描述该身份的作用"
              ></a-textarea>
            </a-form-item>
            <a-form-item label="状态" required>
              <a-segmented :options="setOptions('启用', '禁用')" v-model:value="roleForm.status" />
            </a-form-item>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-form-item :label-col="{ span: 24 }">
            <a-card :body-style="{ height: '370px', overflowY: 'auto' }" title="分配菜单">
              <template #extra>
                <div class="flex align-center mb-8">
                  <span class="text-12 system__subtitle mr-4">父子关联</span>
                  <a-switch v-model:checked="roleForm.menuCheckStrictly"></a-switch>
                </div>
              </template>
              <a-tree
                :treeData="treeData"
                checkable
                block-node
                :selectable="false"
                v-model:checked-keys="roleForm.menuIds"
                :fieldNames="{
                  key: 'id',
                  title: 'label',
                }"
                default-expand-parent
                :check-strictly="!roleForm.menuCheckStrictly"
                ref="treeRef"
              ></a-tree>
            </a-card>
          </a-form-item>
        </a-col>
      </a-row>
    </FormCard>
  </a-form>
</template>

<script setup lang="ts">
import { createRole, updateRole } from '@/api/modules/system/role/role';
import { setOptions } from '@/global/options/system';
import { message } from 'ant-design-vue';

import { hasPerm } from '@/utils/common/perm';
import { roleList } from '../../data/curd';
import { roleForm, roleResetForm } from '../../data/form';
import { RoleViewNum, roleFormMode, roleMenus, roleTable } from '../../data/table';
const treeData = ref<any[]>([]);
const loading = ref(false);

const treeRef = ref();

const submit = async () => {
  loading.value = true;
  try {
    if (roleForm.value) {
      let data: any = roleForm.value.menuIds;
      const halfCheckedKeys: number[] = treeRef.value.halfCheckedKeys;
      let menuIds: number[] = [];
      if (data.checked) {
        menuIds = data.checked.concat(data.halfCheckedKeys || []);
      } else {
        menuIds = roleForm.value.menuIds;
      }
      if (halfCheckedKeys && halfCheckedKeys.length > 0) {
        menuIds = menuIds.concat(halfCheckedKeys);
      }

      menuIds = Array.from(new Set(menuIds));

      if (roleForm.value.roleId) {
        const { data } = await updateRole({
          ...roleForm.value,
          menuIds,
        });
        message.success(data.msg);
      } else {
        const { data } = await createRole(roleForm.value);
        message.success(data.msg);
      }
      loading.value = false;
      await roleList();
      roleResetForm();
      back();
    }
  } catch (error) {
    loading.value = false;
  }
};

const back = () => {
  roleFormMode.value = RoleViewNum.ROLE_TABLE;
};
watch(
  roleMenus,
  () => {
    treeData.value = roleMenus.value;
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<style lang="scss" scoped>
:deep(.ant-card) {
  box-shadow: none;
}
</style>
